<template>
  <a-card :bordered="false">
    <a-tabs default-active-key="manager" @change="tabChange">
      <a-tab-pane key="manager" tab="子管理">
      </a-tab-pane>
      <a-tab-pane key="visitor" tab="普通用户" >

      </a-tab-pane>
      <a-tab-pane key="regulator" tab="客服管理员">
      </a-tab-pane>
    </a-tabs>
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="24">

          <a-col :md="6" :sm="8">
            <a-form-item label="用户账号">
              <a-input placeholder="请输入用户账号" v-model="queryParam.userName"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <a-form-item label="">
              <a-range-picker :style="{width: '256px'}"
                              v-model="queryParam.createTimeRange"
                              :ranges="{ Today: [moment().startOf('day'), moment().endOf('day')], 'This Month': [moment().startOf('month'), moment().endOf('month')] }"
              />
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
          </a-col>

        </a-row>
      </a-form>
    </div>

    <!-- 操作按钮区域 -->
    <div class="table-operator">

    </div>
    <!-- table区域-begin -->
    <div>

      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        @change="handleTableChange">
        <span slot="action" slot-scope="text,record">
          <a href="javascript:;" @click="detail(record)">详情</a>
        </span>
        <span slot="cost" slot-scope="text, r">
          {{r[roleStrMapDic[r.roleStr]]}}
        </span>
      </a-table>
    </div>
    <VisitorOrderFormModal ref="modal"></VisitorOrderFormModal>
  </a-card>
</template>

<script>
  import {JeecgListMixin} from '@/mixins/JeecgListMixin'
  import {Dict} from '@/api/Dict'
  import {getAction} from "@api/manage";
  import VisitorOrderFormModal from './modules/VisitorOrderFormModal'
  import moment from 'moment';
  export default {
    name: "VisitorOrderFormList",
    mixins: [JeecgListMixin, Dict],
    components: {
      VisitorOrderFormModal
    },

    data() {
      return {
        timeRange:{

        },
        description: '用户业绩页面',
        // 表头
        columns: [
          {
            title: '#',
            dataIndex: '',
            key: 'rowIndex',
            width: 30,
            align: "center",
            customRender: function (t, r, index) {
              return parseInt(index) + 1;
            }
          },
          {
            title: '用户账号',
            align: "center",
            dataIndex: 'userName',
            width: 160
          },
          {
            title: '用户名',
            align: "center",
            dataIndex: 'realName',
            width: 160
          },
          {
            title: '用户角色',
            align: "center",
            dataIndex: 'roleName',
            width: 160
          },
          {
            title: '总业绩',
            align: "center",
            dataIndex: 'totalTakeMoney',
            width: 160,
            /* customRender:function (t,r,index) {
               console.log(r.roleStr);
               return '';
             }*/
            scopedSlots: {customRender: 'cost'},
          },
          {
            title: '总提成',
            align: "center",
            dataIndex: 'commission',
            width: 160,
            /*   customRender:function (t,r,index) {
                 console.log(t,r,index)
               }*/
          },
          {
            title: '参与订单量',
            align: "center",
            dataIndex: 'orderCount',
            width: 160
          },

          {
            title: '操作',
            dataIndex: 'action',
            align: "center",
            scopedSlots: {customRender: 'action'},
            width: 160,
          }
        ],
        url: {
          list: "/orderForm/aggregations/queryVisitorAggregationsList"
        },
        role:'manager'
      }
    },
    computed: {
      importExcelUrl: function () {
        return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
      }
    },
    created() {
      console.log(this.roleStrMapDic);
    },
    methods: {
      moment,
      dateChange(date, dateString) {
        console.log(date,dateString);
        this.queryParam.startTime = date[0].unix();
        this.queryParam.endTime = date[1].unix();
      },
      tabChange(val){
        console.log(val);
        this.role = val;
        this.loadData();
      },
      loadData(arg) {
        if (!this.url.list) {
          this.$message.error("请设置url.list属性!")
          return
        }
        //加载数据 若传入参数1则加载第一页的内容
        if (arg === 1) {
          this.ipagination.current = 1;
        }
        var params = this.getQueryParams();//查询条件;
        if(params.createTimeRange){
          params.startTime = params.createTimeRange[0].unix();
          params.endTime = params.createTimeRange[1].unix();
          delete params.createTimeRange;
        }
        params.role =  this.role;
        getAction(this.url.list, params).then((res) => {
          if (res.success) {
            this.dataSource = res.result.records;
            this.ipagination.total = res.result.total;
          }
        })
      },
      detail(r) {
        this.$refs.modal.username = r.userName;
        this.$refs.modal.roleStr = r.roleStr;
        this.$refs.modal.visible = true;
        this.$refs.modal.title = '详情';
      },
      searchReset(){
        this.queryParam = {};
        this.loadData(1);
      }

    }
  }
</script>
<style lang="less" scoped>
  /** Button按钮间距 */
  .ant-btn {
    margin-left: 3px
  }

  .ant-card-body .table-operator {
    margin-bottom: 18px;
  }

  .ant-table-tbody .ant-table-row td {
    padding-top: 15px;
    padding-bottom: 15px;
  }

  .anty-row-operator button {
    margin: 0 5px
  }

  .ant-btn-danger {
    background-color: #ffffff
  }

  .ant-modal-cust-warp {
    height: 100%
  }

  .ant-modal-cust-warp .ant-modal-body {
    height: calc(100% - 110px) !important;
    overflow-y: auto
  }

  .ant-modal-cust-warp .ant-modal-content {
    height: 90% !important;
    overflow-y: hidden
  }

  .contText {
    overflow: hidden; /*内容超出后隐藏*/
    text-overflow: ellipsis; /* 超出内容显示为省略号*/
    white-space: nowrap; /*文本不进行换行*/
  }
</style>